
<template>

  <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">商品管理</span>
    <el-button type="primary" style="float:right;margin-top: 10px;"
               @click="beforeAddMerchant">添加商品</el-button>
  </div>
<!--添加商品弹窗-->
  <el-dialog
      :title="dialogTitle"
      style="width: 1500px;padding:40px;"
      v-model="dialogVisible"
      :before-close="handleClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="商品名称">
            <el-input placeholder="请输入商品名称"
                      v-model="saveMerchantForm.name" :disabled="saveMerchantForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品规格">
            <el-input placeholder="请输入商品规格" v-model="saveMerchantForm.norms"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="价格">
            <el-input placeholder="请输入商品价格" v-model="saveMerchantForm.price"></el-input>
          </el-form-item>
        </el-col>
       <el-col :span="12">
          <el-form-item label="商品库存">
            <el-input placeholder="请输入商品库存" v-model="saveMerchantForm.number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="12" v-if="isbj">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="原图片">
                <img :src="BASE_URL+saveMerchantForm.imgURL" style="width:150px;">
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上传图片2">
                <el-upload
                    v-model:file-list="fileList"
                    v-model:action="actionUrl"
                    name="file"
                    limit="1"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                >
                  <el-icon><Plus/></el-icon>
                </el-upload>
                <el-dialog v-model="dialogPictureVisible">
                  <img w-full :src="dialogImageUrl"/>
                </el-dialog>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" v-else>
          <el-form-item label="上传图片1">
            <el-upload
                v-model:file-list="fileList"
                v-model:action="actionUrl"
                name="file"
                limit="1"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
            >
              <el-icon><Plus/></el-icon>
            </el-upload>
            <el-dialog v-model="dialogPictureVisible">
              <img w-full :src="dialogImageUrl"/>
            </el-dialog>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="额外信息">
            <el-input placeholder="请输入额外信息" v-model="saveMerchantForm.additional"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveMerchant">保存</el-button>
    </template>
  </el-dialog>

  <!-- 商品搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="商品名称" style="width: 270px;">
        <el-input placeholder="请输入商品名称"
                  v-model="searchMerchantForm.name" @keydown.enter="loadMerchant"></el-input>
      </el-form-item>
      <el-form-item label="商品规格" style="width: 270px;">
        <el-input placeholder="请输入商品规格"
                  v-model="searchMerchantForm.norms" @keydown.enter="loadMerchant"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 商品数据表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="merchantArr">
      <el-table-column label="商品id" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="商品名称" prop="name"  align="center"></el-table-column>
      <el-table-column label="商品规格" prop="norms" align="center"></el-table-column>
      <el-table-column label="商品价格" prop="price" align="center"></el-table-column>
      <el-table-column label="商品库存" prop="number" align="center"></el-table-column>
      <el-table-column label="图片链接" prop="imgURL" align="center"></el-table-column>
<!--      <el-table-column label="图片链接" align="center">-->
<!--        <template #default="scope">-->
<!--          <el-image          style="width: 100px; height: 100px"-->
<!--                             :src="scope.row.imgURL"-->
<!--                             :preview-src-list="[scope.row.imgURL]"-->
<!--                             fit="cover"-->
<!--          ></el-image>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="额外信息" prop="additional" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editMerchant(scope.row.id)">编辑</el-button>
          <el-button link type="primary" @click="deleteMerchant(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//定义变量保存弹窗的标题
const dialogTitle = ref('添加商品');
//
const isbj = ref(false);
//获取当前商户的id
const user = ref(getUser());
const userid = user.value.id;
//定义变量用来控制弹窗是否出现
const dialogVisible = ref(false);

//定义对象用来保存商品搜索条件
const searchMerchantForm = ref({id: userid ,name:'', norms:''});
//定义数组用来保存商品表格数据
const merchantArr = ref([]);

//定义对象用来保存新增商品表单中收集的数据
const saveMerchantForm = ref({
  name:'',
  norms:'',
  price:'',
  number:'',
  imgURL:'',
  additional:'',
  userid:userid,
});
//点击关闭商品时调用的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    saveMerchantForm.value = {};
    saveMerchantForm.value.userid = userid;
    dialogVisible.value = false;
  }
}

//点击添加商品时调用的方法
const beforeAddMerchant = ()=>{
  isbj.value = false;
  dialogTitle.value = '添加商品';
  dialogVisible.value = true;
  console.log('添加商品')
  console.log(saveMerchantForm.value)
}

//定义加载商品数据的方法
const loadMerchant = ()=>{
  let data = qs.stringify(saveMerchantForm.value);
  console.log(userid);
  console.log(user.value.id);
  console.log(saveMerchantForm.value);
  console.log('******************************');
  axios.get(BASE_URL+'/v1/merchant/select?'+data)
      .then((response)=>{
        if(response.data.state == 2002){
          merchantArr.value = response.data.data;
          console.log(merchantArr.value);
        }else{
          ElMessage.error(response.data.message);
        }
      })
}
//定义重置搜索的方法
const resetSearch = ()=>{
  //清空之前输入的搜索条件
  searchMerchantForm.value = {};
  searchMerchantForm.value.userid = userid;
  //重新加载所有的用户数据
  loadMerchant();
}

//页面加载完毕立即加载用户数据(首次调用)
onMounted(()=>{
  console.log(userid)
  loadMerchant();
})

/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogPictureVisible = ref(false);
//定义变量用来保存图片上传给那个后端接口地址
const actionUrl = ref(BASE_URL+'/v1/file/upload');
// 移除图片的方法 ↓
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求，删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if(response.data.state == 2002) {
          ElMessage.success('删除成功!');
        }
      })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  dialogPictureVisible.value = true;
  console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}
/**图片上传相关代码结束**/


//定义一个保存商品的方法
const saveMerchant = ()=>{
  console.log(saveMerchantForm.value);
  // let data = qs.stringify(saveMerchantForm.value);
  console.log(saveMerchantForm);
  console.log('111111111');
  if (saveMerchantForm.value.id == null){
    console.log(saveMerchantForm.value);

    saveMerchantForm.value.imgURL = fileList.value[0].response.data;
    axios.post(BASE_URL+'/v1/merchant/add',saveMerchantForm.value)
        .then((response)=>{
          if(response.data.state == 2002){
            ElMessage.success('添加成功!');
            dialogVisible.value = false;
            saveMerchantForm.value = {};//表单数据清空
            fileList.value = [];//图片清空
            saveMerchantForm.value.userid = userid;
            //新增成功后,需要重新加载所有的用户数据
            loadMerchant();
          }else{
            ElMessage.error(response.data.message);
          }
        })
  }else{

    axios.post(BASE_URL+'/v1/merchant/update',saveMerchantForm.value)
        .then((response)=>{
          if(response.data.state == 2002){
            ElMessage.success('修改成功!');
            dialogVisible.value = false;
            saveMerchantForm.value = {};//表单数据清空
            fileList.value = [];//图片清空
            saveMerchantForm.value.userid = userid;
            //更新成功后,需要重新加载所有的用户数据
            loadMerchant();
          }else{
            ElMessage.error(response.data.message);
          }
        })
  }

}
//定义编辑商品的方法
const editMerchant = (id)=>{
  isbj.value = true;
  dialogVisible.value = true;
  dialogTitle.value = '编辑商品';
  //根据当前待编辑商品的id,回显此商品的数据
  axios.get(BASE_URL+'/v1/merchant/select?id='+id).then((response)=>{
    if(response.data.state == 2002){
      saveMerchantForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.message);
    }
  })
}
//删除商品的方法
const deleteMerchant = (id)=>{
  if(confirm('您确认要删除该商品吗?')){
    axios.post(BASE_URL+'/v1/merchant/delete/'+id).then((response)=>{
      if(response.data.state == 2002){
        ElMessage.success('删除成功!');
        //重新加载用户数据
        loadMerchant();
      }else{
        ElMessage.error(response.data.message);
      }
    })
  }
}
</script>


<style scoped>

</style>
为什么原图片不显示